<template>
  <div class="view-wrapper">
    <div class="head">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="70px">
        <el-form-item label="站点"  label-width="50px" prop="city">
            <el-input
            v-model="queryParams.city"
            placeholder="请输入站点"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="标题"   label-width="50px"  prop="productTitle">
            <el-input
            v-model="queryParams.productTitle"
            placeholder="请输入关键词"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="第三方分类"  label-width="90px"  prop="category">
            <el-input
            v-model="queryParams.category"
            placeholder="请输入关键词"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
            />
        </el-form-item>
        <el-form-item label="产品分类"  prop="typeId">
            <el-select v-model="queryParams.typeId" placeholder="请选择" clearable size="small" >
            <el-option v-for="item in typePro" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <el-form-item label="价格区间"  >
            <div class="price">
                <el-form-item  prop="startSalePrice" style="margin-right: 0;">
                <el-input @input="(v)=>(queryParams.startSalePrice=v.replace(/[^\d]/g,''))" v-model="queryParams.startSalePrice" placeholder="最低价" clearable size="small" @keyup.enter.native="handleQuery" style="width: 100px; "/>
                </el-form-item>
                <div class="line">-</div>
                <el-form-item  prop="endSalePrice">
                <el-input @input="(v)=>(queryParams.endSalePrice=v.replace(/[^\d]/g,''))" v-model="queryParams.endSalePrice" placeholder="最高价" clearable size="small" @keyup.enter.native="handleQuery" style="width: 100px;"/>
                </el-form-item>
            </div>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
        </el-form>
    </div>
    
    <div class="listBox">
      
     <div class="main-head">
        <div class="main-head-left">
            <el-tabs v-model="queryParams.queryType" @tab-click="handleClick" v-if="queryTypeListStatus">
                <el-tab-pane v-for="item in queryTypeList" :label="item.label+'('+item.num+')'" :name="item.name" :key="item.name"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="main-head-right">
            <el-button type="primary" size="small" @click="batchChangeProductType">批量配置产品分类</el-button>
            <el-button type="primary" size="small" @click="handleBatchChangeProductStatus(true)">批量启用</el-button>
            <el-button type="primary" size="small" @click="handleBatchChangeProductStatus(false)">批量停用</el-button>
            <new-export-excel-button title="聚推客选品配置" action="/asset/product/export" :params="ExportParams" :buttonType="'warning'" :buttonSize="'mini'"/>
            <!-- <el-button
            type="warning"
            icon="el-icon-download"
            size="small"
            :loading="exportLoading"
            @click="handleExport"
            >导出</el-button> -->
        </div>
    </div>

        <el-table style="width: 100%" v-loading="loading" ref="multipleTable" :data="productList" stripe border  row-key="id"  @selection-change="handleSelectionChange" @sort-change="tableSortChange">
            <el-table-column type="selection" width="55" align="center" :reserve-selection="true"  fixed/>
            <el-table-column label="序号" type="index" align="center" width="64" />
            <el-table-column label="产品id" align="center" prop="id" width="100"/>
            <el-table-column label="站点" align="center" prop="city" width="100"/>
            <el-table-column label="第三方分类" align="center" prop="category" width="100"/>
            <el-table-column label="产品分类" align="center" prop="typeName" width="100"/>
            <el-table-column label="产品名称" align="center" prop="productTitle"/>
            <el-table-column label="售价" align="center" prop="salePrice"  sortable='custom' width="100"/>
            <el-table-column label="门市价" align="center" prop="originPrice"  sortable='custom' width="100"/>
            <el-table-column label="销量" align="center" prop="saleAmount"  sortable='custom' width="100"/>
            <el-table-column label="更新时间" align="center" prop="updateTime"  sortable='custom'  width="170"/>
            <el-table-column label="详情页面链接" align="center" prop="h5Detail"  width="220"/>
            <el-table-column label="产品状态" align="center" prop="productStatus" width="100"/>
            <!-- <el-table-column label="产品链接" align="center" prop="name" /> -->
            <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" v-if="scope.row.productStatus == '未启用'" @click="handleChangeState(scope.row.id,true)">启用</el-button>
                    <el-button size="mini" type="text" v-else @click="handleChangeState(scope.row.id,false)">停用</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            style="margin-top:20px;"
            v-show="total>0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[10,50,200,500]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>

    <Dialog ref="dialog" @refresh="batchChangeType"></Dialog>
  </div>


</template>

<script>
import { listProduct, typeSelectList,exportProduct,batchChangeProductType,batchChangeProductStatus,productTotal } from "@/api/operateActive";
import Dialog from "./dialog";
import NewExportExcelButton from "./NewExportExcelButton";

export default {
  name: "Product",
  components: {
    Dialog,
    NewExportExcelButton
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //产品分类
      typePro:[],
      // 头部标签参数 first:全部 second:新上线 third:已启用 fourth:未启用
      // 头部标签参数列表
      queryTypeList: [
        {name:'0',label:'全部',num:''},
        {name:'1',label:'新上线',num:''},
        {name:'2',label:'已启用',num:''},
        {name:'3',label:'未启用',num:''}
      ],
      queryTypeListStatus:false,
      // 聚客推旅游产品表格数据
      productList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        queryType:'0',//产品查询类型 0-全部 1-新上线 2-已启用 3-未启用
        city: null, //站点名称
        productTitle: null, //商品标题
        category: null, //分类名
        typeId: null, //产品分类
        startSalePrice: null, //开始售价(低价)
        endSalePrice: null, //结束售价（高价）
        orderField:null, //	排序列 0-售价 1-门市价 2-销量 3-更新时间
        orderSort:null,//	排序的方向,示例值(asc,desc)
      },
      formParams:{}
    };
  },
  created() {
    this.getTypeSelectList();
    this.getProductTotal()
    this.getList();
    // console.log(this.loading)

  },
  computed:{
     ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
  },
  methods: {
    tableSortChange(column,prop,order){
     //   orderField:null, //	排序列 0-售价 1-门市价 2-销量 3-更新时间
     //  orderSort:null,//	排序的方向,示例值(asc,desc)
      let that =  this
      if(column.prop =="salePrice" && column.order == "ascending"){
          that.queryParams.orderSort = 'asc'
          that.queryParams.orderField = '0'

      }else if(column.prop =="salePrice" && column.order == "descending"){
           that.queryParams.orderSort = 'desc'
           that.queryParams.orderField = '0'
      }
      else if(column.prop =="originPrice" && column.order == "ascending"){
          that.queryParams.orderSort = 'asc'
          that.queryParams.orderField = '1'

      }else if(column.prop =="originPrice" && column.order == "descending"){
           that.queryParams.orderSort = 'desc'
           that.queryParams.orderField = '1'
      }
       else if(column.prop =="saleAmount" && column.order == "ascending"){
          that.queryParams.orderSort = 'asc'
          that.queryParams.orderField = '2'

      }else if(column.prop =="saleAmount" && column.order == "descending"){
           that.queryParams.orderSort = 'desc'
           that.queryParams.orderField = '2'
      }
      else if(column.prop =="updateTime" && column.order == "ascending"){
          that.queryParams.orderSort = 'asc'
          that.queryParams.orderField = '3'

      }else if(column.prop =="updateTime" && column.order == "descending"){
           that.queryParams.orderSort = 'desc'
           that.orderField = '3'
      }else{
           that.queryParams.orderSort = null
           that.queryParams.orderField = null
      }
      // console.log(that.queryParams)
      this.getList()
    },
    /** 查询聚客推旅游产品列表 */
    getList() {
      this.loading = true;
      listProduct(this.queryParams).then(response => {
        this.productList = response.result.records;
        this.total = response.result.total;
        this.loading = false;
        
      });
    },
    //获取产品数量
    getProductTotal(){
        let data = JSON.parse(JSON.stringify(this.queryParams));
        this.queryTypeListStatus = false
        productTotal(data).then(response => {
          this.queryTypeListStatus = true
          this.queryTypeList[0].num = response.result.total
          this.queryTypeList[1].num = response.result.newTotal
          this.queryTypeList[2].num = response.result.enableTotal
          this.queryTypeList[3].num = response.result.disableTotal
          // this.typePro = response.data;
          // this.getList()
      });
    },
    //改变启用停用状态
    handleChangeState(id,status){
      var idList = []
      idList[0] = id
      this.batchChangeProductStatusSingle(idList,status,1)
    },
    //批量改变启用停用状态
    handleBatchChangeProductStatus(status){
       var idList = []
       idList = this.ids
       this.batchChangeProductStatus(idList,status,2)
    },
    // 改变启用停用状态 请求
    batchChangeProductStatus(idList,status){
        var data = { idList:idList, isEnable:status}
        var title = ''; //头部
        var text = ''; //内容
        var butText = ''; //内容
        if(status){
           text = '已选择'+idList.length+'条数据，是否批量启用。'; title = '批量启用产品'; butText= '确定启用'
        }
        else{
           text = '已选择'+idList.length+'条数据，是否批量停用。'; title = '批量停用产品'; butText= '确定停用'
        }
        if(idList.length == 0){  this.$message.warning('请选择'+title+'的数据'); return;}
        this.$confirm(text,title,{
          confirmButtonText: butText,
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            return batchChangeProductStatus(data);
        }).then(response => {
            if(response.code == 200){
               this.$message.success('操作成功');
               this.$refs.multipleTable.clearSelection();
               this.getProductTotal()
               this.resetQuery()
           }
        }).catch(() => {});

    },
    batchChangeProductStatusSingle(idList,status){
        var data = { idList:idList, isEnable:status}
        var title = ''; //头部
        var text = ''; //内容
        var butText = ''; //内容
        if(status){
           text = '是否启用该产品。'; title = '启用产品'; butText= '确定启用'
        }
        else{
           text = '是否停用该产品。'; title = '停用产品'; butText= '确定停用'
        }
        if(idList.length == 0){  this.$message.warning('请选择'+title+'的数据'); return;}
        this.$confirm(text,title,{
          confirmButtonText: butText,
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            return batchChangeProductStatus(data);
        }).then(response => {
            if(response.code == 200){
               this.$message.success('操作成功');
               this.$refs.multipleTable.clearSelection();
               this.resetQuery()
            //    this.getList()
           }
        }).catch(() => {});

    },
    //批量改变产品分类
    batchChangeProductType(){
       if(this.ids.length == 0){  this.$message.warning('请选择批量配置产品分类的数据'); return;}
       this.$refs.dialog.open(this.typePro);
    },
    batchChangeType(typeId){
      var data = {
        idList:this.ids,
        typeId:typeId
      }
       batchChangeProductType(data).then(response => {
          // this.typePro = response.data;
          if(response.code == 200){
              this.$message.success('配置成功');
              this.$refs.multipleTable.clearSelection();
              this.resetQuery()
          }
        
      });
    },
    //获取产品分类
    getTypeSelectList() { 
      typeSelectList().then(response => {
        this.typePro = response.result;
      });
    },
    // 点击头部tab标签
    handleClick(tab, event) {
        this.queryParams.pageNum = 1;
        this.queryParams.pageSize = 10;
        this.queryParams.orderSort = null
        this.queryParams.orderField = null
        this.$refs['queryForm'].resetFields();
        this.$refs.multipleTable.clearSort();
        this.$refs.multipleTable.clearSelection();
        this.getList()
      },

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getProductTotal()
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.pageSize = 10;
      this.queryParams.queryType = '0';
      this.queryParams.orderSort = null
      this.queryParams.orderField = null
      this.$refs['queryForm'].resetFields();
      this.$refs.multipleTable.clearSort();
      this.$refs.multipleTable.clearSelection();
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },

    // 每页条数
    handleSizeChange(pageSize) {
        this.queryParams.pageSize = pageSize;
        this.getList();
    },
    // 当前页码
    handleCurrentChange(pageNum) {
        this.queryParams.pageNum = pageNum;
        this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.w270{
  width: 270px;
}
.main-head{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}
.main-head-left{
  width: 40%;
}
.price{
  display: flex;
  align-items: center;
  flex-direction: row;
}
.line{
  padding: 0 10px;
}


  .el-card-title {
    font-size: 20px;
  }

  .head {
    //   box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px 0;
  }

  .el-form--inline .el-form-item {
    margin-right: 10px;
  }

  .listBox {
    //   box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }

  .table_list {
    display: flex;
    align-items: center;
    // border: 1px solid #DCDFE6;
    border-radius: 7px;
    width: 220px;
    margin-bottom: 10px;
  }

  .tableBox {
    width: calc(100% / 3);
    height: 36px;
    text-align: center;
    line-height: 36px;
    color: #303133;
    font-size: 14px;
    border: 1px solid #dcdfe6;
    border-right: 0;
  }

  .tableBox:first-child {
    border-radius: 7px 0px 0px 7px;
  }

  .tableBox:last-child {
    border-right: 1px solid #dcdfe6;
    border-radius: 0px 7px 7px 0px;
  }

  .spchoosetext {
    background-color: #fff4e6;
    color: #ff9300;
    /* border: 1px solid #ff9300; */
  }

  .listBox_head {
    margin-bottom: 20px;
    display: flex;
  }

  .slot_box {
    display: flex;
    align-items: center;
  }

  .avatar_img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .sumit_button {
    color: #fff !important;
    background: #ff7b35 !important;
    border: 0;
  }

  .sumit_button:hover {
    opacity: 0.9;
  }

  .card_box {
    width: 160px;
    height: 100px;
    background: linear-gradient(112deg,
        #f85936 0%,
        rgba(255, 147, 123, 0.99) 100%);
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    line-height: 100px;
  }
</style>
